// pages/map/map.js
// 引入SDK核心类
var QQMapWX = require("../../lib/qqmap-wx-jssdk.js")


Page({

  /**
   * 页面的初始数据
   */
  data: {
    show: false,
    mkList: [],
    markers: [],
    latitude: 0,
    longitude: 0,

  },

  controlTap(e) {
    console.log("按钮点击成功");
    this.mapCtx = wx.createMapContext('myMap');
    const that = this;
    wx.getLocation({
      //是否开启高精度定位
      isHighAccuracy: true,
      //高精度定位超时时间(ms)
      highAccuracyExpireTime: 6000,
      type: 'gcj02',
      success: (res) => {
        that.setData({
          longitude: res.longitude,
          latitude: res.latitude,
        });
        this.mapCtx.moveToLocation();
      },
      fail: (res) => {
        console.log('getLocation fail', res);
      }
    });
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    /*
    通过 wx.getStorageSync 获取车辆的位置信息数据，存储在 all_car_detail_info 变量中。
    实例化 QQMapWX 对象，传入开发者的 Key。
    设定每次请求的批次数量 batchSize 和每批请求的时间间隔 interval。
    根据每批请求的数量和总数据量计算出总批次数 batchCount。
    通过循环分批请求，将所有车辆的位置信息拆分成多个批次，每次请求 batchSize 个车辆的位置信息。
    在每批请求的回调函数中，通过 setTimeout 实现每批请求之间的时间间隔。
    在每批请求中，循环处理当前批次中的每个车辆位置信息，并调用 QQMapWX 对象的 reverseGeocoder 方法进行逆地址解析。
    在逆地址解析成功的回调函数中，获取地址信息和车辆图片信息，将这些信息组成地图标记点，并将标记点添加到 mkList 数组中。
    在逆地址解析失败的回调函数中，打印错误信息，并将已完成的请求数量 completed 加 1。
    在每批请求处理完成后，检查是否已经完成所有请求，如果完成则将所有标记点设置为地图的 markers 属性，以在地图上显示出所有车辆的位置标记点。
    */
    var all_car_detail_info = wx.getStorageSync('all_car-detail_info')
    var qqmapsdk = new QQMapWX({
      key: '6VOBZ-IOF3I-ODJGR-UPZBE-TVCB2-MWFLK'
    });
    var _this = this;
    var batchSize = 5; // 每批请求的数量
    var interval = 1000; // 每批请求的时间间隔（毫秒）
    var batchCount = Math.ceil(all_car_detail_info.length / batchSize); // 总批次数
    var completed = 0; // 已完成的请求数量
    var mkList = []; // 所有的标记点
    for (var i = 0; i < batchCount; i++) {
      /*
      JavaScript 的 Array.slice() 方法，用来切割数组并返回一个新的数组。具体来说，all_car_detail_info 是一个数组，i * batchSize 表示起始下标，(i + 1) * batchSize 表示结束下标，返回的 batch 数组包含了从起始下标到结束下标（不包含结束下标）的所有元素。这个过程相当于将 all_car_detail_info 数组分成了若干个大小为 batchSize 的子数组，并将这些子数组逐一处理。
      */
      var batch = all_car_detail_info.slice(i * batchSize, (i + 1) * batchSize);
      console.log("这是第" + i + "批次");

      /*
      setTimeout 函数的三个参数依次表示：异步回调函数、延迟时间和传递给异步回调函数的参数 batch。
      延迟时间设置为 i * interval，可以让每一批次请求的时间间隔逐渐加大，从而保证并发请求数量不会太高，腾讯位置服务逆地址解析限制并发量请求为5次/秒。
      setTimeout函数是一个异步函数，它将函数推迟到指定的时间后执行，不会阻塞当前代码的执行.当一个批次的循环中有setTimeout函数时，如果时间未到，JavaScript引擎会跳过这个setTimeout函数的执行，继续执行下一个循环。在指定的时间后执行相应的回调函数。如果设置的延迟时间太短，比如设置为interval，也就是一秒，那么由于setTimeout函数不会阻碍循环，因此整个循环会非常快的结束（可能几毫秒就结束），当所有的批次循环结束时，每一个批次的setTimeout函数都在队列中等待执行，且都是过一秒执行，因此一秒后基本上所有的批次的setTimeout函数都会一起执行（说是基本上，是因为每个批次的setTimeout函数执行时间都很接近，每个批次循环的几毫秒时间是这些setTimeout函数执行时间相差一点点的原因，也就是setTimeout函数执行时间是设置的延迟时间加上自己所属的批次循环结束花费的几毫秒时间），发出的请求过多会被限制，这个时候就要改变延迟时间了，合理的设置来达到限流， 延迟时间设置为 i * interval，第一批次1秒后执行setTimeout函数，第二批次等2秒，依次类推，这样每批的setTimeout函数执行时间都会有一个1秒的间隔，可以达到限流。
      */
      setTimeout(function (batch) {
        console.log("这是第" + i + "批次的settimeout函数");
        for (var j = 0; j < batch.length; j++) {
          var carDetailInfo = batch[j];
          console.log( carDetailInfo);
          let image = carDetailInfo.image;
          console.log(image)
          qqmapsdk.reverseGeocoder({
            location: carDetailInfo.lat + "," + carDetailInfo.lng,
            success: function (res) {
              var address = res.result.address;
              var mk = {
                title: address,
                id: mkList.length,
                latitude: res.result.location.lat,
                longitude: res.result.location.lng,
                iconPath: 'http://localhost:80/common/download?name=' + image,
                width: 30,
                height: 30,
                callout: {
                  content: address,
                  color: '#000',
                  display: 'ALWAYS',
                  bindtap: function () {
                    console.log('您点击了标记点：' + address);
                  }
                }
              };
              mkList.push(mk);
              completed++;
              if (completed === all_car_detail_info.length) {
                _this.setData({
                  markers: mkList
                });
              }
            },
            fail: function (error) {
              console.error(error);
              completed++;
            }
          });
        }
      }, i * interval, batch);
    }
    wx.getLocation({
      //是否开启高精度定位
      isHighAccuracy: true,
      //高精度定位超时时间(ms)
      highAccuracyExpireTime: 6000,
      type: 'gcj02',
      success: (res) => {
        this.setData({
          longitude: res.longitude,
          latitude: res.latitude
        });
      },
      fail: (res) => {
        console.log('getLocation fail', res);
      }
    });
  },



  onMarkerTap(e) {
    console.log("marker被点击"); // 输出点击的标记点的id
    var markerId = e.markerId; // 获取标记点id
    var marker = this.data.markers[markerId]; // 获取标记点信息
    console.log(marker.title);
    // 进行其他操作
    wx.openLocation({ // 打开微信内置地图并显示目标位置信息
      latitude: marker.latitude,
      longitude: marker.longitude,
      name: marker.title
    })
    //this.showPopup();
  },

  showPopup() {
    this.setData({
      show: true
    });
  },

  onClose() {
    this.setData({
      show: false
    });
  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})